<template>
    <div class="article">
        <div class="nav">
            <a href="#">关注</a>
            <a href="#" class="select">推荐</a>
            <a href="#">热榜</a>
            <a href="#">视频</a>
        </div>
        <ul>
            <li>
                <a href="#" class="title">为什么满江红网上骂声一片？</a>
                <div class="bottom">
                    <div class="bottom-top">
                        <span>狸奴：发现一个有趣的现象：骂满江红的：剧情、选角、演技、历史层层分析，有理有据，评论区：
                            那是你没看懂。骂流浪地球的：不好看，电影睡了三个小时。
                        </span>
                        <button>
                            阅读全文
                            <i class="iconfont icon-jiantou_down"></i>
                        </button>
                    </div>
                    <div class="bottom-bottom">
                        <span>
                            <button>
                                <i class="iconfont icon-jiantou"></i>
                                赞同362
                            </button>
                            <button>
                                <i class="iconfont icon-zhankaijiantou"></i>
                            </button>
                        </span>
                        <div class="bottom-bottom-r">
                            <button>
                                <i class="iconfont icon-xiaoxi2"></i>
                                69 条评论
                            </button>
                            <div>
                                <i class="iconfont icon-a-ziyuan619"></i>
                                分享
                            </div>
                            <div>
                                <i class="iconfont icon-shoucang1"></i>
                                收藏
                            </div>
                            <div>
                                <i class="iconfont icon-xihuan1"></i>
                                喜欢
                            </div>
                            <div>···</div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#" class="title">为什么满江红网上骂声一片？</a>
                <div class="bottom">
                    <div class="bottom-top">
                        <span>狸奴：发现一个有趣的现象：骂满江红的：剧情、选角、演技、历史层层分析，有理有据，评论区：
                            那是你没看懂。骂流浪地球的：不好看，电影睡了三个小时。
                        </span>
                        <button>
                            阅读全文
                            <i class="iconfont icon-jiantou_down"></i>
                        </button>
                    </div>
                    <div class="bottom-bottom">
                        <span>
                            <button>
                                <i class="iconfont icon-jiantou"></i>
                                赞同362
                            </button>
                            <button>
                                <i class="iconfont icon-zhankaijiantou"></i>
                            </button>
                        </span>
                        <div class="bottom-bottom-r">
                            <button>
                                <i class="iconfont icon-xiaoxi2"></i>
                                69 条评论
                            </button>
                            <div>
                                <i class="iconfont icon-a-ziyuan619"></i>
                                分享
                            </div>
                            <div>
                                <i class="iconfont icon-shoucang1"></i>
                                收藏
                            </div>
                            <div>
                                <i class="iconfont icon-xihuan1"></i>
                                喜欢
                            </div>
                            <div>···</div>
                        </div>
                    </div>
                </div>
            </li><li>
                <a href="#" class="title">为什么满江红网上骂声一片？</a>
                <div class="bottom">
                    <div class="bottom-top">
                        <span>狸奴：发现一个有趣的现象：骂满江红的：剧情、选角、演技、历史层层分析，有理有据，评论区：
                            那是你没看懂。骂流浪地球的：不好看，电影睡了三个小时。
                        </span>
                        <button>
                            阅读全文
                            <i class="iconfont icon-jiantou_down"></i>
                        </button>
                    </div>
                    <div class="bottom-bottom">
                        <span>
                            <button>
                                <i class="iconfont icon-jiantou"></i>
                                赞同362
                            </button>
                            <button>
                                <i class="iconfont icon-zhankaijiantou"></i>
                            </button>
                        </span>
                        <div class="bottom-bottom-r">
                            <button>
                                <i class="iconfont icon-xiaoxi2"></i>
                                69 条评论
                            </button>
                            <div>
                                <i class="iconfont icon-a-ziyuan619"></i>
                                分享
                            </div>
                            <div>
                                <i class="iconfont icon-shoucang1"></i>
                                收藏
                            </div>
                            <div>
                                <i class="iconfont icon-xihuan1"></i>
                                喜欢
                            </div>
                            <div>···</div>
                        </div>
                    </div>
                </div>
            </li><li>
                <a href="#" class="title">为什么满江红网上骂声一片？</a>
                <div class="bottom">
                    <div class="bottom-top">
                        <span>狸奴：发现一个有趣的现象：骂满江红的：剧情、选角、演技、历史层层分析，有理有据，评论区：
                            那是你没看懂。骂流浪地球的：不好看，电影睡了三个小时。
                        </span>
                        <button>
                            阅读全文
                            <i class="iconfont icon-jiantou_down"></i>
                        </button>
                    </div>
                    <div class="bottom-bottom">
                        <span>
                            <button>
                                <i class="iconfont icon-jiantou"></i>
                                赞同362
                            </button>
                            <button>
                                <i class="iconfont icon-zhankaijiantou"></i>
                            </button>
                        </span>
                        <div class="bottom-bottom-r">
                            <button>
                                <i class="iconfont icon-xiaoxi2"></i>
                                69 条评论
                            </button>
                            <div>
                                <i class="iconfont icon-a-ziyuan619"></i>
                                分享
                            </div>
                            <div>
                                <i class="iconfont icon-shoucang1"></i>
                                收藏
                            </div>
                            <div>
                                <i class="iconfont icon-xihuan1"></i>
                                喜欢
                            </div>
                            <div>···</div>
                        </div>
                    </div>
                </div>
            </li><li>
                <a href="#" class="title">为什么满江红网上骂声一片？</a>
                <div class="bottom">
                    <div class="bottom-top">
                        <span>狸奴：发现一个有趣的现象：骂满江红的：剧情、选角、演技、历史层层分析，有理有据，评论区：
                            那是你没看懂。骂流浪地球的：不好看，电影睡了三个小时。
                        </span>
                        <button>
                            阅读全文
                            <i class="iconfont icon-jiantou_down"></i>
                        </button>
                    </div>
                    <div class="bottom-bottom">
                        <span>
                            <button>
                                <i class="iconfont icon-jiantou"></i>
                                赞同 362
                            </button>
                            <button>
                                <i class="iconfont icon-zhankaijiantou"></i>
                            </button>
                        </span>
                        <div class="bottom-bottom-r">
                            <button>
                                <i class="iconfont icon-xiaoxi2"></i>
                                69 条评论
                            </button>
                            <div>
                                <i class="iconfont icon-a-ziyuan619"></i>
                                分享
                            </div>
                            <div>
                                <i class="iconfont icon-shoucang1"></i>
                                收藏
                            </div>
                            <div>
                                <i class="iconfont icon-xihuan1"></i>
                                喜欢
                            </div>
                            <div>···</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Article'
    }
</script>

<style scoped>
    .article {
        width: 694px;
        height: 100%;
        background-color: white;
        border-radius: 10px 10px 10px red;
    }
    .nav {
        width: 100%;
        height: 58.8px;
        line-height: 58.8px;
        border-bottom: 1px solid #f0f2f7;
    }
    .nav a {
        display: inline-block;
        margin: 0 22px;
    }
    .article ul li {
        height: 158.54px;
        border-bottom: 1px solid #f0f2f7;
        padding: 20px;
    }
    .title {
        font-size: 18px;
        font-weight: 600;
    }
    .title:hover {
        color: #175199;
    }
    .bottom-top {
        position: relative;
        margin: 9px 0 -4px;
    }
    .bottom-top span {
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.67;
    }
    .bottom-top button {
        position: absolute;
        bottom: 4px;
        right: 85px;
        font-size: 14px;
        background-color: transparent;
        cursor: pointer;
        color: #175199;
    }
    .bottom-top button:hover, .bottom-top span:hover {
        color: #808080;
    }
    .bottom-bottom, .bottom-bottom-r {
        display: flex;
        align-items: center;
    }
    .bottom-bottom {
        margin: 0 -20px -10px;
        padding: 10px 20px;
        color: #8590a6;
        font-size: 14px;
    }
    .bottom-bottom span button {
        padding: 0 12px;
        background-color: #056DE81A;
        height: 31.6px;
        color: #056de8;
        cursor: pointer;
    }
    .bottom-bottom span button:nth-child(2) {
        margin-left: 4px;
    }
    .bottom-bottom-r button {
        background-color: transparent;
        height: 31.6px;
        color: #8590a6;
        cursor: pointer;
        margin-left: 24px;
    }
    .bottom-bottom-r div {
        margin-left: 24px;
        cursor: pointer;
    }
    .bottom-bottom-r div:hover,.bottom-bottom-r button:hover {
        color: #73869D;
    }
    .bottom-bottom span button:hover {
        background-color: #056DE826;
    }
    .select {
        color: #056DE8;
    }
</style>